<template>
  <div class="wrapper">
    <div class="easy-content">
      <div class="left">
        <ul>
          <li v-for="(item,index) in configTreeList"
            :key="index"
            @click="handleClick(index)"
            :class="{'actived': index == indexItem}">
            {{item}}
          </li>
        </ul>
      </div>
      <div class="right">
        <el-form :inline="true">
          <!-- 单位类型 -->
          <el-form-item>
            <el-input :placeholder="placeholder" clearable
              v-model="search"
              style="width:300px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
              @click="_search"
              class="btn"
              size="small">
              <i class="el-icon-search"></i>
            </el-button>
          </el-form-item>
          <el-form-item class="fr">
            <el-button type="primary"
              @click.native="_add"
              class="btn"
              size="small" v-has="'protocoladd'">
              新增
            </el-button>
          </el-form-item>
          <el-form-item v-show="indexItem !== 2">
            <el-table :data="dataList"
              max-height="550">
              <el-table-column label="编号"
                prop="num">
              </el-table-column>
              <el-table-column label="描述"
                prop="describes">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="text"
                    @click="_edit(scope.row)" v-has="'protocolchange'">修改</el-button>
                  <el-button type="text"
                    @click="_delete(scope.row.id)" v-has="'protocoldelete'">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 单位等级 -->

          </el-form-item>
          <el-form-item v-show="indexItem == 2">
            <el-table :data="dataList"
              max-height="550">
              <el-table-column label="编号"
                prop="num">
              </el-table-column>
              <el-table-column label="描述"
                prop="describes">
              </el-table-column>
              <el-table-column label="合同期限(年)"
                prop="timeLimit">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="text"
                    @click="_edit(scope.row)" v-has="'protocolchange'">修改</el-button>
                  <el-button type="text"
                    @click="_delete(scope.row.id)" v-has="'protocoldelete'">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item class="fr">
            <el-pagination @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, prev , pager , next, sizes"
              :total="total">
            </el-pagination>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 新增编辑弹窗 -->
    <el-dialog :title="title"
      :visible.sync="dialogVisible"
      width="400px">
      <el-form label-width="100px">
        <el-form-item label="编号"
          required>
          <el-input placeholder="请输入编号"
            v-model.trim="num"
            maxlength="10"
            clearable></el-input>
        </el-form-item>
        <el-form-item label="描述"
          required>
          <el-input placeholder="请输入描述"
            v-model.trim="name"
            maxlength="10"
            clearable></el-input>
        </el-form-item>
        <el-form-item label="合同年限"
          v-if="indexItem == 2"
          required>
          <el-input placeholder="请输入合同年限"
            style="width:80%"
            maxlength="2"
            v-model="limit"
            v-number-only
            clearable></el-input>
          <span>年</span>
        </el-form-item>
      </el-form>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
          @click="_sure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getTypeList,
  deleteType,
  updateType,
  getCodeList,
  deleteCode,
  updateCode,
  getClassList,
  deleteClass,
  updateClass,
  getBzaarList,
  deleteBzaar,
  updateBzaar,
  getClientList,
  deleteClient,
  updateClient,
  getBankList,
  deleteBank,
  updateBank,
  getTaxList,
  deleteTax,
  updateTax,
  getPaymentList,
  deletePayment,
  updatePayment
} from "@/public/js/agreement";
export default {
  components: {},
  props: {},
  data() {
    return {
      configTreeList: [],
      dataList: [],
      indexItem: 0,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      search: "",
      id: "",
      num: "",
      name: "",
      placeholder: "请输入单位类型编号/描述",
      limit: "",
      title: ""
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 初始化数据
    _initFn() {
      this.configTreeList = [
        "单位类型",
        "行业代码",
        "单位等级",
        "市场来源",
        "客源来源",
        "开户行",
        "房税结构",
        "付款方式"
      ];
      this._getTypeList();
    },
    _getData() {
      switch (this.indexItem) {
        case 0:
          this.placeholder = "请输入单位类型编号/描述";
          this._getTypeList();
          break;
        case 1:
          this.placeholder = "请输入行业代码编号/描述";
          this._getCodeList();
          break;
        case 2:
          this.placeholder = "请输入单位等级编号/描述";
          this._getClassList();
          break;
        case 3:
          this.placeholder = "请输入市场来源编号/描述";
          this._getBzaarList();
          break;
        case 4:
          this.placeholder = "请输入客户来源编号/描述";
          this._getClientList();
          break;
        case 5:
          this.placeholder = "请输入开户行编号/描述";
          this._getBankList();
          break;
        case 6:
          this.placeholder = "请输入房税结构编号/描述";
          this._getTaxList();
          break;
        case 7:
          this.placeholder = "请输入付款方式编号/描述";
          this._getPaymentList();
          break;
        default:
      }
    },
    handleClick(index) {
      this.indexItem = index;
      this.search = "";
      this.pageNum = 1;
      this.pageSize = 10;
      this._getData();
    },
    // 统一编辑
    _edit(item) {
      this.num = item.num;
      this.name = item.describes;
      this.limit = item.timeLimit;
      this.id = item.id;
      console.log(this.indexItem)
      switch (this.indexItem) {
        case 0:
          this.title = "编辑单位类型";
          break;
        case 1:
          this.title = "编辑行业代码";
          break;
        case 2:
          this.title = "编辑单位等级";
          break;
        case 3:
          this.title = "编辑市场来源";
          break;
        case 4:
          this.title = "编辑客源来源";
          break;
        case 5:
          this.title = "编辑开户行";
          break;
        case 6:
          this.title = "编辑房税结构";
          break;
        case 7:
          this.title = "编辑付款方式";
          break;
        default:
      }
      this.dialogVisible = true;
    },
    // 删除
    _delete(id) {
      this.id = id;
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          switch (this.indexItem) {
            case 0:
              this._deleteType();
              break;
            case 1:
              this._deleteCode();
              break;
            case 2:
              this._deleteClass();
              break;
            case 3:
              this._deleteBzaar();
              break;
            case 4:
              this._deleteClient();
              break;
            case 5:
              this._deleteBank();
              break;
            case 6:
              this._deleteTax();
              break;
            case 7:
              this._deletePayment();
              break;
            default:
          }
        })
        .catch(() => {});
    },
    // 搜索
    _search() {
      this.pageSize = 10;
      this.pageNum = 1;
      this._getData();
    },
    // 新增
    _add() {
      this.num = "";
      this.name = "";
      this.limit = "";
      this.id = "";
      switch (this.indexItem) {
        case 0:
          this.title = "新增单位类型";
          break;
        case 1:
          this.title = "新增行业代码";
          break;
        case 2:
          this.title = "新增单位等级";
          break;
        case 3:
          this.title = "新增市场来源";
          break;
        case 4:
          this.title = "新增客源来源";
          break;
        case 5:
          this.title = "新增开户行";
          break;
        case 6:
          this.title = "新增房税结构";
          break;
        case 7:
          this.title = "新增付款方式";
          break;
        default:
      }
      this.dialogVisible = true;
    },
    // 弹窗保存
    _sure() {
      if (!this.num) {
        this.$message.error("请输入编号");
        return false;
      } else if (!this.name) {
        this.$message.error("请输入描述");
        return false;
      } else if (!this.limit && this.indexItem == 2) {
        this.$message.error("请输入合同期限");
        return false;
      }
      switch (this.indexItem) {
        case 0:
          this._updateType();
          break;
        case 1:
          this._updateCode();
          break;
        case 2:
          this._updateClass();
          break;
        case 3:
          this._updateBzaar();
          break;
        case 4:
          this._updateClient();
          break;
        case 5:
          this._updateBank();
          break;
        case 6:
          this._updateTax();
          break;
         case 7:
          this._updatePayment();
          break;
        default:
      }
    },
    // 获取单位类型列表数据
    _getTypeList() {
      getTypeList({
        search: this.search,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.dataList = res.data.typeList;
        this.total = res.data.total;
      });
    },
    // 删除单位类型数据
    _deleteType() {
      deleteType({ id: this.id }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this._getTypeList();
        }
      });
    },
    // 新增编辑 单位类型
    _updateType() {
      updateType({
        id: this.id,
        num: this.num,
        name: this.name
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            type: "success",
            message: "操作成功"
          });
          this.dialogVisible = false;
          this._getTypeList();
        }
      });
    },
    // 获取行业代码列表数据
    _getCodeList() {
      getCodeList({
        search: this.search,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.dataList = res.data.codeList;
        this.total = res.data.total;
      });
    },
    // 删除行业代码数据
    _deleteCode() {
      deleteCode({ id: this.id }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this._getCodeList();
        }
      });
    },
    // 新增修改行业代码
    _updateCode() {
      updateCode({
        id: this.id,
        num: this.num,
        name: this.name
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            type: "success",
            message: "操作成功"
          });
          this.dialogVisible = false;
          this._getCodeList();
        }
      });
    },

    /*******单位等级********** */
    //获取列表数据
    _getClassList() {
      getClassList({
        search: this.search,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.dataList = res.data.classList;
        this.total = res.data.total;
      });
    },
    // 删除单位等级
    _deleteClass() {
      deleteClass({ id: this.id }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this._getClassList();
        }
      });
    },
    // 修改新增单位等级
    _updateClass() {
      updateClass({
        id: this.id,
        num: this.num,
        name: this.name,
        limit: this.limit
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            type: "success",
            message: "操作成功"
          });
          this.dialogVisible = false;
          this._getClassList();
        }
      });
    },
    /**********市场来源*********** */
    //获取列表数据
    _getBzaarList() {
      getBzaarList({
        search: this.search,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.dataList = res.data.sourceList;
        this.total = res.data.total;
      });
    },
    // 删除单位等级
    _deleteBzaar() {
      deleteBzaar({ id: this.id }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this._getBzaarList();
        }
      });
    },
    // 修改新增单位等级
    _updateBzaar() {
      updateBzaar({
        id: this.id,
        num: this.num,
        name: this.name
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            type: "success",
            message: "操作成功"
          });
          this.dialogVisible = false;
          this._getBzaarList();
        }
      });
    },

    /*********客源来源*********** */
    _getClientList() {
      getClientList({
        search: this.search,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.dataList = res.data.sourceList;
        this.total = res.data.total;
      });
    },

    _deleteClient() {
      deleteClient({ id: this.id }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this._getBzaarList();
        }
      });
    },
    _updateClient() {
      updateClient({
        id: this.id,
        num: this.num,
        name: this.name,
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            type: "success",
            message: "操作成功"
          });
          this.dialogVisible = false;
          this._getClientList();
        }
      });
    },
    /*******开户行********* */

    _getBankList() {
      getBankList({
        search: this.search,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.dataList = res.data.bankList;
        this.total = res.data.total;
      });
    },
    _deleteBank() {
      deleteBank({ id: this.id }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this._getBankList();
        }
      });
    },
    _updateBank() {
      updateBank({
        id: this.id,
        num: this.num,
        name: this.name
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            type: "success",
            message: "操作成功"
          });
          this.dialogVisible = false;
          this._getBankList();
        }
      });
    },

    /*******房税结构******* */
    _getTaxList() {
      getTaxList({
        search: this.search,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.dataList = res.data.taxList;
        this.total = res.data.total;
      });
    },
    _deleteTax() {
      deleteTax({ id: this.id }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this._getTaxList();
        }
      });
    },
    _updateTax() {
      updateTax({
        id: this.id,
        num: this.num,
        name: this.name
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            type: "success",
            message: "操作成功"
          });
          this.dialogVisible = false;
          this._getTaxList();
        }
      });
    },
    /********付款方式*********** */
    _getPaymentList() {
      getPaymentList({
        search: this.search,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.dataList = res.data.paymentList;
        this.total = res.data.total;
      });
    },
    _deletePayment() {
      deletePayment({ id: this.id }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this._getPaymentList();
        }
      });
    },
    _updatePayment() {
      updatePayment({
        id: this.id,
        num: this.num,
        name: this.name
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            type: "success",
            message: "操作成功"
          });
          this.dialogVisible = false;
          this._getPaymentList();
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this._getData(this.indexItem);
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this._getData(this.indexItem);
    }
  },
  created() {
    this._initFn();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.wrapper {
  .easy-content {
    display: flex;
    padding-top: 30px;
    & > .left {
      width: 200px;
      background: #eef1f9;
      height: 600px;
      li {
        padding: 15px;
        background: #eef1f9;
        line-height: 30px;
        font-size: 14px;
        cursor: pointer;
        &:hover,
        &.actived {
          background: #f5f7fa;
        }
      }
    }
    & > .right {
      flex: 1;
      padding-left: 30px;
    }
  }
  .room-item {
    .el-form-item {
      margin-bottom: 10px;
      .el-input {
        width: 300px;
      }
    }
  }
}
</style>